var localhost='172.16.5.236'
function ShowTrackPoint() {
    /*1、post方式发送数据*/
    $.ajax({
        url: "http://"+localhost+":8000/web/trackpoint/", // 相当于form 中的 action
        type: 'POST', // 相当于form 中的 method
        data: {
            'key': 'value'
        }, // 数据
        dataType: "text", // 注意这个定义的是返回值的类型，不是发送数据的类型，则会进入error函数
        headers: {
            "X-CSRFToken": "{{ csrf_token }}"
        }, //Django中表单提交都需要csrf验证
        success: function (data) { // 后端返回成功后的回调函数,data为后端传来的数据
            var trackSource = new ol.source.Vector({
                url: data,
                format: new ol.format.GeoJSON()
            })
            trackLayer = new ol.layer.Vector({
                source: trackSource
            });
            map.addLayer(trackLayer);

        },
        error: function () {
            alert('没有获取数据')
        }
    })
}

function AjaxPickAndDrop() {
    /*1、post方式发送数据*/
    $.ajax({
        url: "http://"+localhost+":8000/web/dbscan/", // 相当于form 中的 action
        type: 'POST', // 相当于form 中的 method
        data: {
            'key': 'value'
        }, // 数据
        dataType: "json", // 注意这个定义的是返回值的类型，不是发送数据的类型，如果返回类型不是json类型，则会进入error函数
        headers: {
            "X-CSRFToken": "{{ csrf_token }}"
        }, //Django中表单提交都需要csrf验证
        success: function (data) { // 后端返回成功后的回调函数,data为后端传来的数据
            map.removeLayer(trackLayer);
            source = new ol.source.Vector({
                features: (new ol.format.GeoJSON({
                    featureProjection: 'EPSG:3857'
                })).readFeatures(data)
            });
            vectorLayer = new ol.layer.Vector({
                source: source,
                style: function (feature, resolution) {
                    var id = feature.get("pickAndDrop");
                    var style = null;
                    if (id == 'pick') {
                        style = new ol.style.Style({
                            image: new ol.style.Circle({
                                radius: 5,
                                fill: new ol.style.Fill({
                                    color: 'red'
                                })
                            })
                        });
                    } else {
                        style = new ol.style.Style({
                            image: new ol.style.Circle({
                                radius: 5,
                                fill: new ol.style.Fill({
                                    color: 'blue'
                                })
                            })
                        });
                    }
                    return [style]
                }
            });
            map.addLayer(vectorLayer);
            map.getView().setCenter(ol.proj.fromLonLat([114.35, 30.55]));
            map.getView().setZoom(11);
        },
        error: function () {
            alert('没有获取数据')
        }
    })
};

function ShowClustering() {
    /*1、post方式发送数据*/
    $.ajax({
        url: "http://"+localhost+":8000/web/ShowClustering/", // 相当于form 中的 action
        type: 'POST', // 相当于form 中的 method
        data: {
            'key': 'value'
        }, // 数据
        dataType: "json", // 注意这个定义的是返回值的类型，不是发送数据的类型，如果返回类型不是json类型，则会进入error函数
        headers: {
            "X-CSRFToken": "{{ csrf_token }}"
        }, //Django中表单提交都需要csrf验证
        success: function (data) { // 后端返回成功后的回调函数,data为后端传来的数据
            map.removeLayer(vectorLayer);
            var color_list = data.color_list;
            var clusterLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: "http://"+localhost+":8080/geoserver/taxidm/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=wuhan%3Aodpoint&maxFeatures=50000&outputFormat=application%2Fjson",
                    format: new ol.format.GeoJSON()
                }),
                style: function (feature, resolution) {
                    var id = feature.get("hotpot");
                    var style = null;
                    style = new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 5,
                            fill: new ol.style.Fill({
                                color: color_list[parseInt(id)]
                            })
                        })
                    });
                    return [style]
                }
            });
            map.addLayer(clusterLayer);
        },
        error: function () {
            alert('没有获取数据')
        }
    })
}

function ShowNet(){
    var name_net = jQuery("#selectnet  option:selected").text();
    console.log(name_net)
    if(name_net=="环形图"){
        var net_name='circular';
    }
    else{
        var net_name='force';
    }
    $.ajax({
        url: "http://"+localhost+":8000/web/getedgedata/", // 相当于form 中的 action
        type: 'POST', // 相当于form 中的 method
        data: {
            'key': 'value'
        }, // 数据
        dataType: "json", // 注意这个定义的是返回值的类型，不是发送数据的类型，如果返回类型不是json类型，则会进入error函数
        headers: {
            "X-CSRFToken": "{{ csrf_token }}"
        }, //Django中表单提交都需要csrf验证
        success: function (data) { // 后端返回成功后的回调函数,data为后端传来的数据
            var edgeData=data.edgedata;
            var nodeData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
                26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51,
                52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73
            ];
            var myChart = echarts.init(document.getElementById('main'));
            nodeData = nodeData.map(function (nodeId) {
                return {
                    id: nodeId + '',
                    value: 1
                };
            });
            edgeData = edgeData.map(function (edge) {
                return {
                    source: edge.source,
                    target: edge.target,
                    value: edge.weight
                };
            });
            var itemStyle = {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            };


            
            var option = {
                series: [{
                    type: 'graph',
                    layout: net_name,
                    roam: true,
                    modularity: {
                        resolution: 1,
                        sort:true
                    },
                    itemStyle: itemStyle,
                    data: nodeData,
                    edges: edgeData,
                    left: 10,
                    top: 10,
                    bottom: 20,
                    right:20,
                    lineStyle: {
                        normal: {
                            color: 'source'
                        }
                    }
                }]
            };
            myChart.setOption(option);
        },
        error: function () {
            alert('没有获取数据')
        }
    })
}